<template>
	<view class="solid-bottom" style="width: 100%;background-color: #F9F9F9;">
		<view class="bg-white flex justify-between align-center padding-bottom-sm padding-left padding-right padding-top-sm"
			style="width: 100%;">
			<text class="text-df text-lg text-black text-bold">推荐圈子</text>
			<text class="text-grey">滑动查看</text>
		</view>
		<scroll-view scroll-x="true" style="white-space: nowrap;overflow: hidden;">
			<view class="padding-sm" style="display: inline-block;width: 340upx;200upx;" v-for="(item,index) in dataList" :key="index">
				<view @tap="jumpToProfile(item.circle_id)" class="flex justify-start align-center bg-white shadow radius" style="flex-direction: column;width: 100%;">
					<image :src="item.background" style="width: 100%;height: 160upx;"></image>
					<view class="flex justify-between align-center padding-left-sm padding-right-sm padding-top-xs padding-bottom-xs" style="width: 100%;">
						<text class="text-df text-cut text-bold" style="width: 80%">{{item.name}}</text>
						<text class="text-gray text-sm" style="width: 20%;">{{item.member_count}}圈友</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name:'FeedsRecommendCircle',
		props: {
			dataList: {
				type: Array,
				default: []
			},
		},
		methods: {
			jumpToProfile(circleId) {
				uni.navigateTo({
					url:'/pages/lessuse/circle-profile/circle-profile?circleId='+circleId
				})
			}
		},
	}
</script>

<style scoped>

</style>